<template>
  <div v-if="flag">
    <span>获取验证码({{ time }}s)</span>
  </div>
</template>

<script setup lang="ts">
// 引入组合式API函数ref
import { ref, watch } from 'vue';

// 接受父组件传递过来的props->flag:用于控制计数器组件显示与隐藏的
let props = defineProps(['flag']);
let $emit = defineEmits(['getFlag']);

// 倒计时的事件
let time = ref<number>(5);

// 监听父组件传递过来props数据变化
watch(
  () => props.flag,
  (newVal) => {
    if (newVal) {
      time.value = 5; // 重置计时器
      // 开启定时器
      let timer = setInterval(() => {
        time.value--;
        if (time.value === 0) {
          // 通知父组件倒计时模式结束
          $emit('getFlag', false);
          // 清除定时器
          clearInterval(timer);
        }
      }, 1000);
    }
  },
  {
    immediate: true,
  }
);
</script>

<style scoped></style>

